<template>
  <div>
    <!-- 状态栏 -->
    <div style="background-color: #132144">
      <div class="flex justify-between">
        <div
          class="back"
          style="cursor: pointer"
          @click="
            () => {
              $router.go(-1)
            }
          "
        >
          <svg-icon icon-class="outlined-arrow-left" /> {{ name }}
        </div>
      </div>
      <el-tabs v-model="activeTab" class="dark-tab" @tab-click="tabClickHandle">
        <el-tab-pane :label="$t('merchant.detail')" name="overview" />
        <el-tab-pane :label="$t('merchant.qrcode')" name="qrcode" />
      </el-tabs>
    </div>
    <div style="position: relative; top: -90px">
      
      <div v-if="activeTab === 'overview'">
        <overview :merchant="merchantInfo" @refresh="getMerchant" />
      </div>
      <div v-if="activeTab === 'qrcode'">
        <qr-code :merchant="merchantInfo" @refresh="getMerchant" />
      </div>
    </div>

  </div>
</template>

<script>
import { getMerchant } from "@/api/merchant.ts";
import Overview from "./components/tab/overview.vue";
import QrCode from "./components/tab/qr-code.vue";
export default {
  name: 'MerchantDeatil',
  components: {
    Overview,QrCode
  },
  data() {
    return {
      name: '',
      activeTab: '',
      mrchId: this.$route.params.mrchId,
      merchantInfo: {},
      status: 2,
    }
  },
  created() {
    this.getMerchant()
  },
  methods: {
    getMerchant() {
      getMerchant(this.mrchId).then((res)=>{
        this.merchantInfo = res
        this.name = res.name
        this.activeTab = 'overview'
      }).catch((error)=>{
        this.$confirmError(error)
      })
    },
    tabClickHandle(tab, event) {
      // if (tab.name === 'overview') {
      //   this.$nextTick(() => {
      //     this.$refs.overviewTab.init(this.operator)
      //   })
      // }
      if (tab.name === 'account') {
        this.$nextTick(() => {
          this.$refs.accountTab.init(this.operator)
        })
      }
    },
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf()
      return formatDate(cellValue, fmt)
    },
    expirationHandler() {
      // eslint-disable-next-line no-unused-vars
      if (this.operator) {
        if (this.operator.levelCode) {
          let levelName = this.operator.levelName
          if (levelName && levelName.length > 32) {
            levelName = levelName.slice(0, 31) + '...'
          }
          // if (this.operator.levelCode === 'STANDARD_LEVEL') {
          //   levelName = this.$t('operator.level_list[0].label')
          // } else if (this.operator.levelCode === 'ENTERPRISE_LEVEL') {
          //   levelName = this.$t('operator.level_list[1].label')
          // }
          if (
            !this.operator.expireTime ||
            this.operator.expireTime === undefined
          ) {
            this.level =
              levelName + ' | ' + this.$t('operator.leverExpireForever')
            this.levelHide =
              this.operator.levelName +
              ' | ' +
              this.$t('operator.leverExpireForever')
          } else {
            var date = formatDate(this.operator.expireTime, 'yyyy-MM-dd')
            this.level = levelName + ' | ' + date
            this.levelHide = this.operator.levelName + ' | ' + date
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.back {
  color: #ffffff;
  font-size: 20px;
  margin: 20px;
}
.level-btn {
  background: #2a3757;
  color: #ffffff;
  border: none;
  margin: 20px;
}

.dark-tab {
  margin: 0 20px;
  padding-bottom: 100px;
  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #677796;
    z-index: 1;
  }
  ::v-deep .el-tabs__item {
    color: #677796;
    line-height: 21px;

    &:hover {
      color: #ffffff;
    }

    &.is-active {
      color: #ffffff;
    }
  }

  ::v-deep .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
}
</style>
